<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         .icon-search{
              color: red;
         }
         input[type=search]:focus + .icon-search{
             color: aqua;
         }
         input[type=email]:invalid +.next-step{
             opacity: 0.5;
         }
         .or{
             display: inline-block;
             width: 480px;
             text-align: center;
             position: relative;
         }
         .or::after,.or::before{
             content: '';
             position: absolute;
             top:12px;
             height: 1px;
             background-color: red;
             width: 200px;;
         }
         .or::after{
             right: 0;
         }
         .or::before{
             left: 0;
         }
    </style>
</head>
<body>
     <input type="search">
     <span class="icon-search">收缩</span>

     <hr>
     <br>
     <input type="email">
     <span class="next-step">收缩</span>

     <hr>
     <p class="or">or</p>


</body>
</html>